<template>
	<view>
		<n-loading></n-loading>
		<top-bar :scrollTop="scrollTop" backState="2000" :bgColor="'#F3512D'" fontColor="#FFF" type="fixed" title="会员中心"></top-bar>

		<view class="memberPage" v-if="memberAssembly.memberInfo" :style="{ paddingTop: (statusBarHeight*2+74) + 'rpx' }">
			<image class="titleBg" :style="{top: (statusBarHeight*2+74) + 'rpx'}" src="https://lovebirdopen.com/static/img/cBj/memberBg.png"></image>
			<view class="bj">
				<view class="menberBigBox">
					<view class="totalRevenue">总收益（元）</view>
					<view class="totalRevenueNum">
						<text>{{memberAssembly.memberInfo.total_revenue==null?0:memberAssembly.memberInfo.total_revenue}}</text>
						<!-- <view class="withdraw" @tap="withdrawalGo">提现<u-icon name="arrow-right" color="#fff" size="20"></u-icon></view> -->
					</view>
				</view>
				<!-- 收益导航 -->
				<view class="profitNav">
					<view class="profitNavBox">
						<view class="navItem">
							<view class="navItemTit">预估收益</view>
							<view class="navItemInfo">{{memberAssembly.memberInfo.estimated==null?0:memberAssembly.memberInfo.estimated}}</view>
						</view>
						<view class="navItem">
							<view class="navItemTit">未入账收益</view>
							<view class="navItemInfo">{{memberAssembly.memberInfo.no_settlement==null?0:memberAssembly.memberInfo.no_settlement}}</view>
						</view>
						<view class="navItem">
							<view class="navItemTit">可提现收益</view>
							<view class="navItemInfo">{{memberAssembly.memberInfo.amount==null?0:memberAssembly.memberInfo.amount}}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 会员nav -->
			<view class="memberNav">
				<view class="navItem" @tap="linkList(0)">
					<image src="../../static/member/memberNav1.svg"></image>
					<view class="navTit">我的账本</view>
					<u-icon name="arrow-right" color="#E8E8E8" size="24"></u-icon>
				</view>
				<view class="navItem" @tap="linkList(1)">
					<image src="../../static/member/memberNav2.svg"></image>
					<view class="navTit">我的团队</view>
					<u-icon name="arrow-right" color="#E8E8E8" size="24"></u-icon>
				</view>
				<view class="navItem" @tap="linkList(2)">
					<image src="../../static/member/memberNav3.svg"></image>
					<view class="navTit">贡献排名</view>
					<u-icon name="arrow-right" color="#E8E8E8" size="24"></u-icon>
				</view>
				<view class="navItem" @tap="linkList(3)">
					<image src="../../static/member/memberNav4.svg"></image>
					<view class="navTit">团队收益</view>
					<u-icon name="arrow-right" color="#E8E8E8" size="24"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
				scrollTop:0,
				// 导航栏高度
				statusBarHeight: 0,
				// 组件自定义下拉刷新
				triggered: true
			}
		},
		props:["memberAssembly"],
		created() {
			//获取手机状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
		},
		methods: {
			// 提现
			withdrawalGo(){
				uni.navigateTo({
					url: '/pages/member/withdrawal'
				});
			},
			// 查看账本
			seeBook(){
				uni.navigateTo({
					url:"/pages/member/accountBook"
				})
			},
			linkList(i){
				if(i==0){
					uni.navigateTo({
						url:"/pages/member/accountBook"
					})
				}else if(i==1){
					uni.navigateTo({
						url:"/pages/member/myTeam"
					})
				}else if(i==2){
					uni.navigateTo({
						url:"/pages/member/devoteRank"
					})
				}else{
					uni.navigateTo({
						url:"/pages/member/incomeDetails"
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.titleBg{
		width: 100%;
		height: 282rpx;
		position: absolute;
		/* #ifdef MP-WEIXIN */
		top: 128rpx;
		/* #endif */
		/* #ifndef MP-WEIXIN */
		top: 88rpx;
		/* #endif */
	}
	.memberPage{
		padding-top: 88rpx;
		
		.bj{
			background: #F8F8FA;
		}
	}
	.menberBigBox{
		position: relative;
		padding: 58rpx 32rpx 48rpx;
		
		.memberTop{
			display: flex;
			margin-bottom: 24rpx;
			align-items: center;
			padding: 20rpx 24rpx;
			background: rgba(255, 255, 255, 0.12);
			border-radius: 16rpx;
			color: #fff;
			
			.memberInfoBox{
				flex: auto;
				margin-left: 32rpx;
				
				.memberName{
					display: flex;
					font-size: 32rpx;
					line-height: 48rpx;
					
					.shang{
						width: 40rpx;
						height: 40rpx;
						margin-left: 6rpx;
					}
				}
				
				.vipRank {
					margin-top: 12rpx;
					display: flex;
					align-items: center;
					
					.rank{
						image{
							width: 92rpx;
							height: 40rpx;
						}
					}
					
					.rankLabel {
						padding: 4rpx 16rpx;
						margin-left: 10rpx;
						font-size: 22rpx;
						line-height: 32rpx;
						color: #FFFFFF;
						background-color: rgba(0, 0, 0, 0.24);
						border-radius: 28rpx;
					}
				}
			}
			
			.accountBook{
				padding-left: 32rpx;
				font-size: 28rpx;
			}
		}
		
		.totalRevenue{
			font-size: 24rpx;
			line-height: 40rpx;
			color: rgba(255, 255, 255, 0.7);
		}
		
		.totalRevenueNum{
			display: flex;
			
			text{
				font-size: 72rpx;
				line-height: 64rpx;
				color: #fff;
			}
			
			.withdraw{
				display: inline-block;
				height: 64rpx;
				padding: 0 24rpx;
				margin-left: auto;
				font-size: 24rpx;
				line-height: 64rpx;
				color: #fff;
				background: rgba(255, 255, 255, 0.12);
				border-radius: 70rpx;
				
				.u-icon{
					margin-left: 20rpx;
				}
			}
		}
	}
	// 收益导航
	.profitNav{
		position: relative;
		padding: 0 32rpx;
		margin-bottom: 42rpx;
		
		.profitNavBox{
			display: flex;
			align-items: center;
			text-align: center;
			height: 144rpx;
			background: #FFFFFF;
			box-shadow: 0px 8rpx 48rpx rgba(255, 82, 56, 0.1);
			border-radius: 16rpx;
			
			.navItem{
				flex: 1;
				
				.navItemTit{
					margin-bottom: 8rpx;
					font-size: 22rpx;
					line-height: 24rpx;
					color: #999999;
				}
				
				.navItemInfo{
					font-size: 36rpx;
					line-height: 52rpx;
					color: #333333;
				}
			}
		}
	}
	// 邀请好友
	.inviteFriends{
		position: relative;
		padding: 0 32rpx 32rpx;
		
		.inviteFriendsBox{
			position: relative;
			display: flex;
			align-items: center;
			height: 100rpx;
			padding-left: 216rpx;
			padding-right: 8rpx;
			background: #FFFFFF;
			border-radius: 120rpx;
			
			.shareFriends{
				position: absolute;
				top: -8rpx;
				left: 8rpx;
				width: 192rpx;
				height: 106rpx;
			}
			
			.inviteFriendsIngo{
				flex: auto;
				color: #333333;
				
				.title{
					font-size: 28rpx;
					line-height: 44rpx;
				}
				
				.code{
					font-size: 24rpx;
					line-height: 36rpx;
				}
			}
			
			.inviteFriendsGo{
				width: 84rpx;
				height: 84rpx;
				font-size: 28rpx;
				color: #fff;
				background: linear-gradient(180deg, #FFBE18 0%, #FFDB2F 100%);
				border: 4rpx solid #F6961A;
				border-radius: 50%;
				box-sizing: border-box;
				text-align: center;
				line-height: 84rpx;
			}
		}
	}
	
	// 会员导航
	.memberNav{
		padding-top: 16rpx;
		
		.navItem{
			display: flex;
			align-items: center;
			height: 96rpx;
			padding: 0 48rpx 0 36rpx;
			
			image{
				width: 44rpx;
				height: 44rpx;
			}
			
			.navTit{
				flex: auto;
				margin-left: 16rpx;
				font-size: 28rpx;
				color: #333333;
			}
		}
	}
	
	
	
	
	
		
</style>
